<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <div>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <div class="treeArea">
            <el-tree ref='tree'
               v-loading="loading"
               :data="treeData"
               label="name"
               :props="defaultProps"
               :expand-on-click-node='false'
               node-key="id"
               :check-strictly="true"
               :filter-node-method="filterNode"
               class="filter-tree"
               :highlight-current='true'
               :default-expand-all='true'
               ></el-tree>
          </div>
          <el-row :gutter="5" style="margin-right: 12px;">
            <el-col style="text-align: center; border-top:1px solid #e6e6e6; padding-top:20px; margin-top:10px;">
              <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <!--<el-col :span="12"></el-col>-->
    </el-row>
  </div>
</template>

<script>
import {
  selectMenuTreeByUserId
} from '@/api/systemManage/roleManagementRoleEdit'
export default {
  name: 'viewPri',
  components: {},
  props: ['viewUserPriData'],
  data() {
    return {
      loading: false,
      btnLoading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      oldMenuIdArr: [],
      filterText: '',
      listQuery: {
        condition: {
        },
        fields: [
        ],
        sort: [{
          direction: 'ASC',
          property: 'roleId'
        }]
      },
      rowId: ''
    }
  },
  created() {
    this.loading = true
    selectMenuTreeByUserId({userId: this.viewUserPriData.userId}).then(response => {
      this.treeData = response.data.data
      this.loading = false
    })
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    closeSelf() {
      this.$emit('changeCloseDialog')
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}
</script>

<style scoped>
.treeArea {
  max-height: 45vh;
  overflow-y: auto;
  margin-top: 10px;
}
</style>
